<template>
    <view class="gameScreen">
        <img class="bg" src="../../static/img/bg.jpg" alt="">

        <view class="container">
            <view class="restart-wrap">
                <view class="restart" @click="restart">重新开始</view>
            </view>

            <view class="wrap-4-9">
                <view class="wrap" :class="{'wrap-4': type===4, 'wrap-9': type===9}">
                    <view v-for="(list,i) in sdArr" :key="i">
                        <view v-for="(item,j) in list" :key="j" class="item"
                              :class="{mt: i>0 && i%typeSqrt===0, ml: j>0 && j%typeSqrt===0, itemBg:(item && able[i][j]), border01:sign.num===item, border02:(sign.x===i || sign.y===j), border03:sign.xy===i+''+j}"
                              @click="signChange" :data-x="i" :data-y="j" :data-num="item" :data-able="able[i][j]">
                            {{item}}
                        </view>
                    </view>
                </view>
            </view>

            <view class="btn-wrap" :class="{'btn-wrap-4': type===4, 'btn-wrap-9': type===9}">
                <view class="item" v-for="(item,index) in btnArr" :key="index" :data-num="item" @click="set">{{item}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {SDku} from "../../static/js/sdpro.js";

    export default {
        data() {
            return {
                type: 0,
                typeSqrt: 0,
                sd: {},
                sdArr: [],
                able: [],
                btnArr: [],
                sign: {},
                count: 1,
                errCount: 0
            }
        },
        onLoad(path) {
            this.type = parseInt(path.type);
            this.typeSqrt = Math.sqrt(this.type);
            for (let i = 1; i <= this.type; i++) this.btnArr.push(i);
            this.sd = new SDku(this.type);
            this.sd.init();
            this.sdArr = JSON.parse(JSON.stringify(this.sd.sdArr));
            this.able = this.sd.sdArr.map(list => list.map(item => item ? 0 : 1));
            this.level = Math.pow(this.sd.num, 2) / 2;
            this.startTime = Date.now();
        },
        methods: {
            signChange: function (e) {
                if (parseInt(e.target.dataset.able) === 1) {
                    this.sign = {
                        x: parseInt(e.target.dataset.x),
                        y: parseInt(e.target.dataset.y),
                        xy: e.target.dataset.x + '' + e.target.dataset.y,
                    };
                }
            },
            set: function (e) {
                if (this.sign.xy) {
                    let num = parseInt(e.target.dataset.num);
                    if (this.sdArr[this.sign.x][this.sign.y] !== num) {
                        this.level = this.sdArr[this.sign.x][this.sign.y] ? this.level : this.level - 1;
                        this.sdArr[this.sign.x][this.sign.y] = num;
                        this.sdArr = this.sdArr.slice();
                        this.sign = {num: num};
                        if (this.level === 0) this.check();
                    }
                }
            },
            check: function () {
                if (this.sdArr + '' === this.sd.backupSdArr + '') {
                    let resData = {
                        type: this.type,
                        sdArr: this.sdArr,
                        timeMinutes: parseInt((Date.now() - this.startTime) / 1000 / 60),
                        timeSeconds: parseInt((Date.now() - this.startTime) / 1000 % 60),
                        count: this.count,
                        errCount: this.errCount,
                    };
                    uni.navigateTo({
                        url: '/pages/result/Result?resData=' + JSON.stringify(resData)
                    });
                } else this.errCount++;
            },
            restart: function () {
                this.sdArr = JSON.parse(JSON.stringify(this.sd.sdArr));
                this.sign = {};
                this.level = Math.pow(this.sd.num, 2) / 2;
                this.count++;
                this.errCount = 0;
                this.startTime = Date.now();
            },
        }
    }
</script>

<style lang="less">
    @import "../../static/style/common";

    .gameScreen {
        height: 100%;
        position: relative;

        .bg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .container {
            position: absolute;
            .tlrB(24/7.5vw, 0, 0, 10vh);
            z-index: 9;
            display: flex;
            flex-flow: column;
            align-items: center;

            .restart-wrap {
                .wh(100%, 60/7.5vw);
                position: relative;

                .restart {
                    .hh(60/7.5vw, 60/7.5vw - 0.5px);
                    padding: 0 24/7.5vw;
                    background-color: rgba(255, 0, 0, 0.6);
                    color: #ffffff;
                    font-size: 36/7.5vw;
                    font-weight: 600;
                    border-radius: 60/7.5vw;
                    box-shadow: rgba(255, 0, 0, 0.2) 0 0 5px 2px;
                    text-shadow: 0 1px 0 #ccc, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 1px 3px rgba(0, 0, 0, 0.5);
                    position: absolute;
                    .tr(0, 24/7.5vw);
                }
            }

            .wrap, .btn-wrap {
                .item {
                    text-align: center;
                    color: #ffffff;
                    border-radius: 2vw;
                    border: 1vw solid transparent;
                    box-sizing: border-box;
                    box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px 2px;
                    text-shadow: 0 1px 0 #ccc, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 1px 3px rgba(0, 0, 0, 0.5);
                }
            }

            .btn-wrap {
                width: 100%;
                text-align: center;

                .item {
                    display: inline-block;
                    background-color: @color_03;
                }

                .item:nth-of-type(odd) {
                    transform: rotate(-15deg);
                }

                .item:nth-of-type(even) {
                    transform: rotate(15deg);
                }
            }

            .wrap-4, .btn-wrap-4 {
                .item {
                    .wh(10vw, 10vw);
                    line-height: 8vw - 1px;
                    font-size: 44/7.5vw;
                }
            }

            .wrap-9, .btn-wrap-9 {
                .item {
                    .wh(9vw, 9vw);
                    line-height: 7vw - 1px;
                    font-size: 40/7.5vw;
                }
            }

            .wrap-4-9 {
                flex: 1;
                width: 100%;

                .wrap {
                    box-sizing: border-box;
                    background-color: @color_01;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);

                    .item {
                        float: left;
                        background-color: @color_02;
                    }

                    .itemBg {
                        background-color: @color_03;
                    }

                    .border01 {
                        border-color: rgba(0, 255, 0, 0.6) !important;
                    }

                    .border02 {
                        border-color: rgba(255, 0, 0, 0.3) !important;
                    }

                    .border03 {
                        border-color: rgba(255, 0, 0, 0.6) !important;
                    }
                }

                .wrap-4 {
                    .wh(56vw, 56vw);
                    left: 22vw;
                    border-radius: 2vw;
                    padding: 1vw;

                    .item {
                        margin-top: 2vw;
                        margin-left: 2vw;
                    }

                    .mt {
                        margin-top: 6vw;
                    }

                    .ml {
                        margin-left: 6vw;
                    }
                }

                .wrap-4:before, .wrap-4:after {
                    content: "";
                    background-color: @color_03;
                    position: absolute;
                }

                .wrap-4:before {
                    .wh(100%, 2px);
                    .tl(50%, 0);
                    margin-top: -1px;
                }

                .wrap-4:after {
                    .wh(2px, 100%);
                    .tl(0, 50%);
                    margin-left: -1px;
                }

                .wrap-9 {
                    .wh(96vw, 96vw);
                    left: 2vw;
                    border-radius: 1vw;
                    padding: 0.5vw;

                    .item {
                        margin-top: 1vw;
                        margin-left: 1vw;
                    }

                    .mt {
                        margin-top: 3vw;
                    }

                    .ml {
                        margin-left: 3vw;
                    }
                }
            }
        }
    }
</style>
